{% extends "common/main.html" %}

{% block script %}
<script type="text/javascript">
  function DeleteItem(key) {
    if (confirm("Are you sure you want to DELETE this item?")) {
      document.location.href = "/volunteers?delete=" + key;
    }
  }

  function EditItem(key) {
    var item = Volunteers[key];
    var form = document.getElementById("edit_form");
    ShowEdit(!!item);
    if (item) {
      for (var k in item) {
        value = (item[k] == "None") ? "" : item[k];
        form.elements[k].value = value;
      }
    }
  }

  function ShowEdit(show) {
    document.getElementById("volunteers_edit").style["display"] = show ? "block" : "none";
    document.getElementById("volunteers_noedit").style["display"] = show ? "none" : "block";
    if (show) {
      document.getElementById("edit_form").elements["first_name"].focus();
    }
  }

  function ValidateForm(form) {
    var ok = (!!form.elements["first_name"].value || !!form.elements["last_name"].value);
    document.getElementById("error").innerHTML = ok ? "" : "You must enter a name.";
    return ok;
  }

  var Volunteers = {}
  //{% for v in volunteers %}
  Volunteers["{{ v.key }}"] = {
    "key"         : "{{ v.key }}",
    "first_name"  : "{{ v.first_name }}",
    "last_name"   : "{{ v.last_name }}",
    "phone"       : "{{ v.phone }}",
    "email"       : "{{ v.email }}",
    "address"     : "{{ v.address }}",
    "country"     : "{{ v.country }}"
  };
  //{% endfor %}

</script>
{% endblock script %}

{% block main %}
<h1>Members Area</h1>

<p>Only members can access this page. For web site support, contact the <a href="mailto:admin@watotowabaraka.org">admin</a>.</p>
<p>Useful links:</p>
<ul>
  <li><a target="_blank" href="http://blog.watotowabaraka.org">Blog</a></li>
  <li><a target="_blank" href="http://mail.watotowabaraka.org">Email</a></li>
  <li><a target="_blank" href="http://calendar.watotowabaraka.org">Calendar</a></li>
  <li><a target="_blank" href="http://sites.watotowabaraka.org/volunteers/">Volunteers site</a></li>
</ul>

{% if admin %}
<p>Tools for managing the site (may require authorization):</p>
<ul>
  <li><a target="_blank" href="https://www.google.com/a/cpanel/watotowabaraka.org/Dashboard">Google Apps Dashboard</a> (use this to add new members)</li>
  <li><a target="_blank" href="https://www.google.com/webmasters/tools/summary?siteUrl=http%3A%2F%2Fwatotowabaraka.org%2F&hl=en">Google Webmaster Tools</a></li>
  <li><a target="_blank" href="https://www.google.com/analytics/settings/home?scid=5990644">Google Analytics</a></li>
  <li><a target="_blank" href="http://appengine.google.com/dashboard?app_id=watoto-wa-baraka">Google AppEngine Dashboard</a></li>
</ul>
{% else %}
{% endif %}
<br/>

<!-- TODO: Add notes. -->

<h2>Volunteers Address Book</h2>
<div class="volunteers_list">
  <table class="volunteers" cellpadding="0" cellspacing="0">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Address</th>
        <th></th>
      </tr>
    </thead>

    <body>
      {% for v in volunteers %}
      <tr class="{% cycle odd,even %}">
        <td><a href="javascript:EditItem('{{ v.key }}');">{{ v.get_name }}</a></td>
        <td>{{ v.email|default_if_none:"" }}</td>
        <td>{{ v.phone|default_if_none:"" }}</td>
        <td>{{ v.get_address }}</td>
        <td class="action">
          <a href="javascript:DeleteItem('{{ v.key }}');"><img src="/img/icon_delete.gif" alt="Delete volunteer."/></a>
        </td>
      </tr>
      {% endfor %}
    </body>
  </table>
</div>

<br/>

<div id="volunteers_noedit">
  <button onclick="ShowEdit(true)">Create</button>
</div>

<div id="volunteers_edit" class="volunteers_form" style="display:none">
  <form id="edit_form" action="/volunteers" method="post" onsubmit="return ValidateForm(this);">
  <input type="hidden" name="key"/>
  <table class="volunteers" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>Phone</th>
        <th>Email</th>
      </tr>
      <tr>
        <td><input type="text" class="text" name="first_name"/></td>
        <td><input type="text" class="text" name="last_name"/></td>
        <td><input type="text" class="text" name="phone"/></td>
        <td><input type="text" class="text" name="email"/></td>
      </tr>
      <tr>
        <th colspan="2">Address</th>
        <th>Country</th>
        <th></th>
      </tr>
      <tr>
        <td colspan="2"><input type="text" class="text" name="address"/></td>
        <td><input type="text" class="text" name="country"/></td>
        <td align="right">
          <input type="submit" value="Save"/>
          <input type="reset" value="Cancel" onclick="ShowEdit(false)"/>
        </td>
      </tr>
    </tbody>
  </table>
  </form>
  <div id="error" class="error"></div>
</div>

<br/>
<h2>Volunteers Calendar</h2>
<iframe src="//www.google.com/calendar/hosted/watotowabaraka.org/embed?title=Volunteers%20Calendar&amp;showTitle=0&amp;showPrint=0&amp;height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=rich%40watotowabaraka.org&amp;color=%23A32929&amp;ctz=Africa%2FNairobi" style=" border-width:0 " width="740" height="400" frameborder="0" scrolling="no"></iframe>
{% endblock main %}
